<template>
  <div class="orh-table">
    <!-- <div class="tags">
      <slot name="tag"></slot>
    </div> -->
    <div class="header" :style="{top: $slots.tag?'40px':'0'}">
      <div class="handels">
        <!-- <Tooltip :content="isOpen?'收起菜单':'展开菜单'" placement="bottom" transfer class="sfmu">
          <span @click="shMenu">
            <img v-if="isOpen" src="@/static/img/ss.png" width="20">
            <img v-else src="@/static/img/ssz.png" width="20">
          </span>
        </Tooltip>
        <div class="line"></div> -->
        <Tooltip content="添加" placement="bottom" class="icon_handel" v-button="add">
          <span @click="toAdd">
            <Icon type="plus" size="22"></Icon>
          </span>
        </Tooltip>
        <Tooltip content="删除" placement="bottom" class="icon_handel" v-button="del">
          <span @click="toDel">
            <Icon type="trash-b" size="22"></Icon>
          </span>
        </Tooltip>
        <Tooltip content="截图" placement="bottom" class="icon_handel" v-if="canvas">
          <span @click="toCanvas">
            <Icon type="image" size="22"></Icon>
          </span>
        </Tooltip>
        <slot name="returntosuperior"></slot>
      </div>
      <Breadcrumb class="crubtit" ref="crubtit" v-if="hideTitle">
        <BreadcrumbItem v-for="(item,ind) in title" :key="ind">{{item}}</BreadcrumbItem>
      </Breadcrumb>
      <div class="right_handels">
        <slot name="optiones"></slot>
        <Input
          v-model="value"
          icon="search"
          placeholder="请输入搜索内容"
          style="width: 200px;"
          @on-click="toSearch"
          @on-enter="toSearch"
          v-if="search"
          size="small"
        >
          <Select v-model="before" slot="prepend" style="width: 70px" v-if="searchOption">
            <Option
              value="day"
              v-for="(item,index) in searchOption"
              :key="index"
              :value="item.value" 
            >{{item.label}}</Option>
          </Select>
        </Input>
        <Tooltip content="刷新" placement="bottom" class="icon_handel" v-if="reload">
          <span @click="toReload">
            <Icon type="loop" size="22"></Icon>
          </span>
        </Tooltip>
      </div>
    </div>
    <div class="main" :style="{top: $slots.tag?'80px':'40px'}">
      <div class="content">
        <div class="handle">
          <slot name="option"></slot>
        </div>
        <div class="table">
          <slot name="table"></slot>
        </div>
      </div>
      <div class="footer" v-if="pages">
        <p class="count">共有 {{pageDate.total}} 条记录</p>
        <Page
          :total="pageDate.total"
          :page-size="pageDate.per_page"
          :current.sync="pageDate.current_page"
          class="page"
          @on-change="pageChange"
        ></Page>
      </div>
    </div>
    <slot name="others"></slot>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      value: "",
      before:
        this.searchOptionSelected != undefined
          ? this.searchOptionSelected
          : null,
      list: [],
      title: [],
      isOpen: false
    };
  },
  props: {
    hideTitle: {
      type: Boolean,
      default: true
    },
    canvas: {
      type: Boolean,
      default: false
    },
    add: {
      type: String,
      default: ""
    },
    del: {
      type: String,
      default: ""
    },
    reload: Boolean,
    pages: Boolean,
    search: Boolean,
    pageDate: Object,
    searchOptionSelected: String,
    searchOption: Array
  },
  methods: {
    toAdd() {
      this.$emit("on-add");
    },
    toDel() {
      this.$emit("on-del");
    },
    toReload() {
      // this.value=''
      this.$emit("on-reload");
    },
    toSearch() {
      this.$emit("on-search", this.value, this.before);
    },
    pageChange(page) {
      this.$emit("on-page-change", page);
    },
    toCanvas() {
      let _this = this;
      this.$emit("on-canvas", data => {
        _this.screenshot(data);
      });
    },
    screenshot(table) {
      // this.$emit('on-canvas');
      // let table = this.canvas.$el;
      html2canvas(table, {
        allowTaint: true,
        imageTimeout: 0,
        removeContainer: true
      }).then(canvas => {
        var url = canvas.toDataURL("image/png", 1.0);
        let a = document.createElement("a");
        a.href = url;
        a.download = "未命名";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    shMenu() {
      let bool = !this.isOpen;
      this.$store.commit("upIsOpen", bool);
    }
  },
  created() {
    // let route = this.$route.fullPath.split("/");
    // let modules = this.$modules;
    // let arr = [];
    // let moditem = modules.find(item => item.path == route[1]);
    // arr.push(moditem.alias[this.lang]);
    // if (moditem.children && moditem.children.length) {
    //   let rest = moditem.children.find(item => item.path == route[2]);
    //   arr.push(rest.alias[this.lang]);
    // }
    // this.title = arr;
  },
  mounted() {
    // this.$nextTick(() => {
    //   if (this.hideTitle) {
    //     let dom = this.$refs.crubtit.$el;
    //     let w = dom.offsetWidth / 2 + "px";
    //     dom.style.left = `calc(50% - ${w})`;
    //   }
    // });
  }
};
</script>

<style lang="less">
.orh-table {
  // width: 100%;
  // height: 100%;
  // position: relative;
  .tags {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    border-bottom: 1px solid #e9eaec;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    border-bottom: 1px solid #e9eaec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 33px 0 0;
    .icon_handel {
      cursor: pointer;
      margin-left: 15px;
      Icon {
        color: #555;
      }
    }
    .right_handels {
      width: auto;
      display: flex;
      justify-content: flex-end;
    }
    .handels {
      display: flex;
      align-items: center;
      width: 35%;
      .sfmu {
        line-height: 12px;
        padding-left: 8px;
        cursor: pointer;
      }
      .line {
        width: 1px;
        height: 25px;
        background: #f2f2f2;
        margin: 0 8px;
      }
    }
    .crubtit {
      position: absolute;
      left: 0;
    }
  }
  .main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    .content {
      padding: 10px 0;
      position: absolute;
      bottom: 55px;
      top: 0px;
      right: 20px;
      left: 20px;
      width: 77vw;
      overflow: auto;
      background: #fff;
      .handle {
        margin-bottom: 10px;
      }
    }
    .footer {
      width: 100%;
      height: 55px;
      line-height: 55px;
      position: absolute;
      bottom: 0px;
      border-top: 1px solid #e9eaec;
      .count {
        float: left;
        padding-left: 25px;
      }
      .page {
        float: right;
        margin-right: 25px;
      }
    }
  }
}
</style>
